
import { Form, Row, Col,Collapse,message } from 'antd';
import React,{ useEffect, useState } from 'react';
import type {UploadFile} from 'antd/es/upload/interface'
import cardStyles from '../../transferOfNames/index.less';
import cardStyle from '../../index.less';
import {getTransfer} from '@/service/order';
import styles from './index.less';
import {getPublicDownloadUrl} from '@/service/common/upload'

const {Panel} = Collapse

const formLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 4 },
  },
  wrapperCol: {
    xs: { span: 24, offset: 0 },
    sm: { span: 20, offset: 0 },
  },
};
function TransFerInfo(props:any) {
  const { info } = props;
  const [form] = Form.useForm();
  const [deduction,setDeduction] = useState<any[]>([]) // 扣款列表
  const [deductionAll,setdeductionAll] = useState(0) // 扣款总额
  const [reduction,setReduction] = useState([]) // 减免列表
  const [reductionAll,setreductionAll] = useState(0) // 减免总额
  const [data,setDate]  = useState<any>({estimatedTime:'',applyRemark:'',remark:'',attachmentList:''})
  const [allNumState,setAllNumState] = useState('1')
  const [allNum,setAllNum] = useState(0)
  const [fileList, setFileList] = useState<UploadFile[]>([])
  const [statue,setStatue] = useState(1)
  useEffect(()=>{
    if(info?.id){
      getTransfer(info?.id).then((res)=>{
        if(res?.success){
          if(res?.data?.attachmentList){
            getPublicDownloadUrl(info?.contract?.attachmentList).then((res1:any)=>{  
              setFileList(res1?.data)
            })
          }
          if(res?.data?.estimatedTime){
            setStatue(2)
          }
          if(res?.data?.collectFeeList?.length>0 || res?.data?.deductionFeeList?.length>0){
            setStatue(3)
          }
          if(res?.data?.handlerName){
            setStatue(4)
          }
          setDate(res?.data)
          setDeduction(res?.data?.collectFeeList)
          let num = 0
          let num2 = 0
          res?.data?.collectFeeList?.forEach((res1:any)=>{
              const num1 = Number(res1?.feeItemAmount)
              num +=num1
          })
          num = Number(num.toFixed(2))
          setdeductionAll(num)
          res?.data?.deductionFeeList?.forEach((res2:any)=>{
            const num3 = Number(res2?.feeItemAmount)
              num2 +=num3
          })
          num2 = Number(num2.toFixed(2))
          setreductionAll(num2)
          setReduction(res?.data?.deductionFeeList)
          if(num>=num2){
            setAllNumState('1')
            setAllNum(Number((num-num2).toFixed(2)))
          }else{
            setAllNumState('2')
            setAllNum(Number((num2-num).toFixed(2)))
          }
        }
      })
    }
   
  },[info?.id])
  const customizeHeader = (value: string) => (
    <div>
      <div className={styles.tip} />
      {value}
    </div>
  )
  return (
    <>
    {statue>1 &&
         <div className={cardStyle.card} id="transfer">
         <Collapse
            defaultActiveKey={[1]}
            ghost
            expandIconPosition="end">
               <Panel header={customizeHeader('申请过户')} key="1">
                <Form {...formLayout} wrapperCol={{ flex: 1 }}>
                    <Row gutter={24} className={cardStyles.rows}>
                      <Col span={24}>
                        <Form.Item label="预计过户时间">{data?.estimatedTime}</Form.Item>
                      </Col>
                      <Col span={24}>
                        <Form.Item label="备注">{data?.applyRemark}</Form.Item>
                      </Col>
                    </Row>
                  </Form>
               </Panel>
          </Collapse>     
        </div>
    }
    {statue>2 &&
        <div className={cardStyle.card} style={{position:'relative'}}>
        <Collapse
            defaultActiveKey={[1]}
            ghost
            expandIconPosition="end">
              <Panel header={customizeHeader('过户结算信息')} key="1">
              <div className={cardStyles.boxs}>
                <span className={styles.value} style={{fontWeight:'normal',fontSize:'14px'}}>{allNumState ==='1'?'需要客户补缴金额/元':'需要退还客户金额/元'}:{allNum}</span>
              </div>
              <div className={cardStyles.box}>
                <p className={cardStyles.title}>扣款费用项</p>
                <div className={cardStyles.line}>
                  {deduction?.map((res:any)=>(
                      <div className={cardStyles.line_box}>
                      <p className={cardStyles.text}>{res?.feeItemName}:</p>
                      <p className={cardStyles.value}>{res?.feeItemAmount}</p>
                    </div> 
                  ))}
                </div>
                <div className={cardStyles.all}>
                  <span>合计：</span>
                  <span>{deductionAll}</span>
                </div>
              </div>


              <div className={cardStyles.box}>
                <p className={cardStyles.title}>减免费用项</p>
                <div className={cardStyles.line}>
                {reduction?.map((res:any)=>(
                      <div className={cardStyles.line_box}>
                      <p className={cardStyles.text}>{res?.feeItemName}:</p>
                      <p className={cardStyles.value}>{res?.feeItemAmount}</p>  
                    </div> 
                  ))}
                </div>
                <div className={cardStyles.all}>
                  <span>合计：</span>
                  <span>{reductionAll}</span>
                </div>
              </div>
              </Panel>
            </Collapse>     
        </div>
    }
    {statue>3 && 
        <div className={cardStyle.card} id="deliveryCarInfo">
          <Collapse
                defaultActiveKey={[1]}
                ghost
                expandIconPosition="end">
            <Panel header={customizeHeader('过户资料上传')} key="1">
                <Form
                    autoComplete="off"
                    {...formLayout}
                    form={form}
                  >
                    <Row gutter={24} className={cardStyles.rows}>
                      <Col span={24}>
                        <Form.Item label="过户时间">{data?.transferTime}</Form.Item>
                      </Col>
                      <Col span={24}>
                      <Form.Item label="过户工作人员">{data?.handlerName}</Form.Item>
                      </Col>
                      <Col span={24}>
                      <Form.Item label="备注">{data?.handleRemark}</Form.Item>
                      </Col>
                      <Col span={24}>
                      <Form.Item label="过户资料">{fileList?.map((res:any)=>(
                        <a href={res.url} download={res?.filename} target='blank'>{res.filename}</a>
                      ))}</Form.Item>
                      </Col>
                    </Row>
                  </Form>
            </Panel>
          </Collapse>    
        </div>
    } 
      
    </>
     
  );
}
export default TransFerInfo;
